<template>
	<div>
		<div class="aid">
			<div class="base" v-loading="spinshow" 　style="width: 900px;margin-left: -450px;">
				<p class="fixed-top">
					活动详情
					<a-icon @click="closeFunction" type="close" />
				</p>
				<div class="main" style="padding: 0 20px 0 20px;overflow-y: auto;">
					<div class="main-list">
						<h4>基础信息</h4>
						<div class="table flex">
							<a-row>
								<a-col :span="8" v-for="(item,index) in detailList" :key="index"
									:style="{'border-bottom':detailList.length%3==0&&index>=(detailList.length/3-1)*3?'0':index>=Math.floor(detailList.length/3)*3?0:''}">
									　{{ item.key }} ：{{ item.val }}
								</a-col>
							</a-row>
						</div>
						<!-- <a-list size="small" bordered :data-source="detailList">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div class="infotit">{{ item.key }} :</div>
								<div class="infocell">{{ item.val }}</div>
							</a-list-item>
						</a-list> -->
					</div>
					<div class="main-list" v-if="data.length>0">
						<h4>其他信息</h4>
						<div class="table">
							<div class="table1" v-for="(item,index) in data" :key="index">
								　{{item.Name}} ：
								<span>
									<span class="infocell" v-for="(file, n) in item.Value.split(',')" :key="n"
										v-if="item.FieldType == 5 || item.FieldType == 6" style="color: #3F81FF;">
										<img src="../../assets/home/dfile.png"
											style="vertical-align: text-top;width: 16px;margin-right: 5px;" v-if="file"
											@click="downloadFile(file, 1)" />
										{{ file.split('|')[0] }}
									</span>
									<span class="infocell"
										v-if="!(item.FieldType == 5 || item.FieldType == 6 || item.FieldType == 7 || item.FieldType == 8)">
										{{ item.Value }}
									</span>
									<span class="infocell" v-if="item.FieldType == 7">
										{{ item.Value ? moment(item.Value).format('YYYY-MM-DD') : '' }}
									</span>
									<span class="infocell" v-if="item.FieldType == 8">
										{{ item.Value ? (item.Value.indexOf('2020-10-10') > -1 ? moment(item.Value).format('HH:mm:ss') : moment('2020-10-10 ' + item.Value).format('HH:mm:ss')) : '' }}
									</span>
								</span>
							</div>
						</div>
						<!-- <a-list class="followListArea" size="small" bordered :data-source="data">
							<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
								<div class="infotit">{{ item.Name }} :</div>
								<div class="flex-1">
									<div class="infocell" v-for="(file, n) in item.Value.split(',')" :key="n"
										v-if="item.FieldType == 5 || item.FieldType == 6">
										{{ file.split('|')[0] }}
										<a-icon type="download" v-if="file" @click="downloadFile(file, 1)"
											style="height: 12px;vertical-align: top;margin-top: 4px;cursor: pointer;">
										</a-icon>
									</div>
									<div class="infocell"
										v-if="!(item.FieldType == 5 || item.FieldType == 6 || item.FieldType == 7 || item.FieldType == 8)">
										{{ item.Value }}</div>
									<div class="infocell" v-if="item.FieldType == 7">
										{{ item.Value ? moment(item.Value).format('YYYY-MM-DD') : '' }}</div>
									<div class="infocell" v-if="item.FieldType == 8">
										{{ item.Value ? (item.Value.indexOf('2020-10-10') > -1 ? moment(item.Value).format('HH:mm:ss') : moment('2020-10-10 ' + item.Value).format('HH:mm:ss')) : '' }}
									</div>
								</div>

							</a-list-item>
						</a-list> -->
					</div>
					<div class="main-list" v-if="VenueReserveData.length > 0">
						<h4>场地信息</h4>
						<a-timeline style="margin-top: 20px;">
							<a-list class="followListArea" size="small" v-if="VenueReserveData.length > 0" bordered
								:data-source="VenueReserveData" style="width: 80%;">
								<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
									<div style="width: 124px">{{ item.Date }} :</div>
									<div style="flex: 1;text-align: left;">{{ item.VenueTimeTable }} --
										{{ item.VenueName }}</div>
									<a-tag v-if="item.State"
										:color="item.State===1?'#87d068':item.State===2?'#2db7f5':'#f50'">
										{{ item.State===1?'预约成功':item.State===2?'取消预约':'退订' }}</a-tag>
								</a-list-item>
							</a-list>
						</a-timeline>
					</div>
					<div class="main-list" v-if="detail.ChargeUserNo===UserInfo.UserNo">
						<h4>审核流程</h4>
						<a-timeline style="margin-top: 20px;">
							<a-timeline-item v-for="(v, i) of flowData" :key="v.ID" v-if="flowData.length > 0">
								<h4 class="gj" style="color: #000;font-weight: normal;font-size: 12px;">
									{{ v.AddTime }}
								</h4>
								<div class="bg-shadow">
									<h4 class="gj"
										:style="{'color':(v.IsAdopt == null ? '#3F81FF' : v.IsAdopt ? '#1A8B05' : '#FF3B3B')}">
										<div class="tit">审核流程：{{ v.FlowTypeName }} --
											{{ v.IsAdopt == null ? '审核中' : v.IsAdopt ? '通过' : '驳回' }}
										</div>
									</h4>
									<div class="gj" v-if="v.ExamUserData&&v.ExamUserData.length>0"
										style="color: #000;font-size: 12px;">
										审核人：
										<div v-for="(flowitem,flowindex) in v.ExamUserData"
											:key="flowindex" style="line-height: 1.8;">{{ flowitem.Name }} - {{ flowitem.UserNo }} -
											{{ flowitem.DepartName }}</div>
									</div>
									<div v-if="v.IsAdopt != null" class="gj" style="color: #000;font-size: 12px;">
										审核人：{{ v.ExamUserName }}
										&nbsp;&nbsp;
										审核时间：{{ v.ExamTime }}
									</div>
									<div v-if="v.IsAdopt != null&& v.ExamComment"
										style="color: #000;margin-top: 5px;font-size: 12px;">
										审核内容：{{ v.ExamComment }}
									</div>
								</div>
							</a-timeline-item>
						</a-timeline>
					</div>

					<div class="fixed-bottom"
						v-show="detail.State == 3 && detail.IsNeedApply && !detail.IsMember && detail.ChargeUserNo!=UserInfo.UserNo">
						<a-button type="primary" html-type="submit" @click="joinActivity">加入活动</a-button>
					</div>
				</div>
				<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example"
						style="width: 100%" :src="previewImage" /></a-modal>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Func from '@/utils/func';
	import Cache from '@/utils/cache';
	import {
		UserActivityDetail,
		UserUpdateActivity,
		getActivityDetail,
		ActivityFlowGetDetail
	} from '@/api/follow';
	const data = [];
	export default {
		components: {},
		props: {
			text: Object,
			ClubID: String
		},
		watch: {
			time: {
				handler(text) {
					// this.GetdetailList()
				},
				immediate: true
			}
		},
		data() {
			return {
				detailList: [],
				detail: {},
				icofileList: [],
				fileList: {},
				previewVisible: false,
				previewImage: '',
				fileList1: [],
				VenueReserveData:[],
				previewVisible1: false,
				previewImage1: '',
				data,
				flowData: [],
				applyIf: false,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				formValue: {},
				dataValue: {},
				isapply: '',
				requestUrl: this.global.requestUrl,
				spinshow: true,
				UserInfo: Cache.get('myInfo'),
				rules: {}
			};
		},
		computed: {},
		created() {
			this.getList();
		},
		mounted() {},
		methods: {
			moment,
			joinActivity() {
				this.$parent.AllJoinActivity(this.detail);
			},
			downloadFile(item, type) {
				window.open(this.requestUrl + item.split('|')[1], '_blank');
			},
			applyHander() {
				this.text = {
					ID: this.$route.query.ID
				};
				this.applyIf = true;
			},
			async getList() {
				let that = this;
				let data = {};
				
				let res={}
				if(this.text.followId!=undefined){
					data.id=this.text.followId
					res = await ActivityFlowGetDetail(data)
				}else{
					data.id = this.text.ActivityID ? this.text.ActivityID : this.text.ID;
					res = this.text.ActivityID ? await getActivityDetail(data):await UserActivityDetail(data);
				}
				//let res = this.text.ActivityID ? await getActivityDetail(data):this.text.source==1 ? await ActivityFlowGetDetail(data) : await UserActivityDetail(data);
				//let res = this.text.ActivityID ? await ActivityFlowGetDetail(data): await ActivityFlowGetDetail(data);
				this.detail = res.data.data;
				this.data = res.data.formData;
				this.VenueReserveData = res.data.resultVenueReserveData;
				this.flowData = res.data.flowData;
				let {
					No,
					ClubName,
					ClassName,
					TypeName,
					Title,
					ApplyIsNeedExam,
					TypeItemName,
					IsNeedApply,
					ApplyStartTime,
					ApplyEndTime,
					IsHasPrize,
					StartTime,
					EndTime,
					ChargeUserName,
					ChargeUserNo,
					PeopleNum,
					MemberNum,
					HourNum,
					IsNeedActivityJob,
					HonestyScore
				} = this.detail;
				let middleKey = [];
				let miidle = [];
				if (this.detail.TypeItemID) {
					if (this.detail.HourNum) {
						middleKey = ['编号', '学生组织/班级', '活动类型', '活动标题', '活动时长（h）', '负责人', '时间', '成员数'];
						miidle = [No || '暂无', ClubName || ClassName, TypeName, TypeItemName, HourNum, ChargeUserName +
							' / ' + ChargeUserNo, StartTime + ' - ' + EndTime, MemberNum
						];
					} else {
						middleKey = ['编号', '学生组织/班级', '活动类型', '活动标题', '负责人', '时间', '成员数'];
						miidle = [No || '暂无', ClubName || ClassName, TypeName, TypeItemName, ChargeUserName + ' / ' +
							ChargeUserNo, StartTime + ' - ' + EndTime, MemberNum
						];
					}
				} else {
					if (this.detail.HourNum) {
						if(!this.detail.ClassID){
							middleKey = [
								'编号',
								'学生组织/班级',
								'活动类型',
								'活动标题',
								'活动时长（h）',
								'负责人',
								'是否需要报名',
								'报名时间',
								'参加活动是否需要审批',
								'是否设置奖项',
								'活动时间',
								'活动人数',
								'成员数',
								'是否有作业',
								'诚信值'
							];
							miidle = [
								No || '暂无',
								ClubName || ClassName,
								TypeName,
								Title,
								HourNum,
								ChargeUserName + ' / ' + ChargeUserNo,
								IsNeedApply ? '是' : '否',
								IsNeedApply ? ApplyStartTime + ' - ' + ApplyEndTime : '无',
								ApplyIsNeedExam ? '需要审批' : '不需要审批',
								IsHasPrize ? '是' : '否',
								StartTime + ' - ' + EndTime,
								PeopleNum == -1 ? '不限' : PeopleNum,
								MemberNum,
								IsNeedActivityJob ? '是' : '否',
								HonestyScore
							];
						}else{
							middleKey = [
								'编号',
								'学生组织/班级',
								'活动类型',
								'活动标题',
								'活动时长（h）',
								'负责人',
								// '是否需要报名',
								// '报名时间',
								// '参加活动是否需要审批',
								// '是否设置奖项',
								'活动时间',
								// '活动人数',
								'成员数',
								// '是否有作业',
								// '诚信值'
							];
							miidle = [
								No || '暂无',
								ClubName || ClassName,
								TypeName,
								Title,
								HourNum,
								ChargeUserName + ' / ' + ChargeUserNo,
								// IsNeedApply ? '是' : '否',
								// IsNeedApply ? ApplyStartTime + ' - ' + ApplyEndTime : '无',
								// ApplyIsNeedExam ? '需要审批' : '不需要审批',
								// IsHasPrize ? '是' : '否',
								StartTime + ' - ' + EndTime,
								// PeopleNum == -1 ? '不限' : PeopleNum,
								MemberNum,
								// IsNeedActivityJob ? '是' : '否',
								// HonestyScore
							];
						}
						
					} else {
						if(this.detail.ClubID){
							middleKey = [
								'编号',
								'学生组织/班级',
								'活动类型',
								'活动标题',
								'负责人',
								'是否需要报名',
								'报名时间',
								'参加活动是否需要审批',
								'是否设置奖项',
								'活动时间',
								'活动人数',
								'成员数',
								'是否有作业',
								'诚信值'
							];
							miidle = [
								No || '暂无',
								ClubName || ClassName,
								TypeName,
								Title,
								ChargeUserName + ' / ' + ChargeUserNo,
								IsNeedApply ? '是' : '否',
								IsNeedApply ? ApplyStartTime + ' - ' + ApplyEndTime : '无',
								ApplyIsNeedExam ? '需要审批' : '不需要审批',
								IsHasPrize ? '是' : '否',
								StartTime + ' - ' + EndTime,
								PeopleNum == -1 ? '不限' : PeopleNum,
								MemberNum,
								IsNeedActivityJob ? '是' : '否',
								HonestyScore
							];
						}else{
							middleKey = [
								'编号',
								'学生组织/班级',
								'活动类型',
								'活动标题',
								'负责人',
								// '是否需要报名',
								// '报名时间',
								// '参加活动是否需要审批',
								// '是否设置奖项',
								'活动时间',
								// '活动人数',
								// '成员数',
								// '是否有作业',
								// '诚信值'
							];
							miidle = [
								No || '暂无',
								ClubName || ClassName,
								TypeName,
								Title,
								ChargeUserName + ' / ' + ChargeUserNo,
								// IsNeedApply ? '是' : '否',
								// IsNeedApply ? ApplyStartTime + ' - ' + ApplyEndTime : '无',
								// ApplyIsNeedExam ? '需要审批' : '不需要审批',
								// IsHasPrize ? '是' : '否',
								StartTime + ' - ' + EndTime,
								// PeopleNum == -1 ? '不限' : PeopleNum,
								// MemberNum,
								// IsNeedActivityJob ? '是' : '否',
								// HonestyScore
							];
						}
						
					}
				}
				this.detailList = miidle.map((v, i) => {
					return {
						key: middleKey[i],
						val: v
					};
				});
				this.spinshow = false;
			},
			closeFunction(data) {
				this.$emit('closeFun', data);
			},
			closeFun() {
				this.applyIf = false;
			},
			handleCancel() {
				this.previewVisible = false;
				this.previewImage = '';
			},
			async handlePreview(file) {
				this.previewImage = file.url;
				window.open(this.previewImage, '_blank');
				// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
				// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
				// 	this.$message.error('该文件格式不支持预览')
				// 	return false
				// }
				// this.previewImage = file.url;
				// this.previewVisible = true;
			},
			icohandleChange({
				fileList
			}, name) {
				this.icofileList = fileList;
			},
			handleChange(info, name) {
				let {
					fileList
				} = info;
				const status = info.file.status;
				if (status === 'done') {
					if (info.file.response.code == 0) {
						this.$message.success(info.file.response.msg);
						this.fileList[name] = [...fileList]; //重点
					} else {
						this.$message.error(info.file.response.msg);
						this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1);
					}
				}
				this.fileList[name] = [...fileList]; //重点
			},
			dataChange(e, name, type) {
				if (type == 'data') {
					let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				} else {
					let time = moment(e).format('HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				}
			},
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = values;
						data.ID = this.detail.ID;
						data.ClubID = this.detail.ClubID;
						let arr1 = [];
						for (let m = 0; m < this.icofileList.length; m++) {
							if (this.icofileList[m].url) {
								arr1.push(this.icofileList[m].url);
							} else {
								arr1.push(this.icofileList[m].response.url);
							}
						}
						data.Ico = arr1.join(',');
						for (let i in this.fileList) {
							let arr = [];
							for (let m = 0; m < this.fileList[i].length; m++) {
								if (this.fileList[i][m].url) {
									arr.push(this.fileList[i][m].url);
								} else {
									arr.push(this.fileList[i][m].response.url);
								}
							}
							data[i] = arr.join(',');
						}
						data = Object.assign(data, this.formValue, this.dataValue);
						if (data.activityDate) {
							data.StartTime = moment(data.activityDate[0]).format('YYYY-MM-DD HH:mm:ss');
							data.EndTime = moment(data.activityDate[1]).format('YYYY-MM-DD HH:mm:ss');
						}
						let res = await UserUpdateActivity(data);
						if (res.data.code == 0) {
							this.$message.success(res.data.msg);
							this.$router.go(-1);
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.main-list {
		margin-top: 45px;

		h4 {
			font-size: 15px;
			color: #000;
			font-weight: bold;
		}

		.table1 {
			border-bottom: 1px solid #E4E4E4;
			margin-top: 0 !important;
			line-height: 40px;

			&:last-child {
				border-bottom: 0
			}
		}

		.table {
			color: #000;
			font-size: 12px;

			.ant-col {
				line-height: 40px;
				border-bottom: 1px solid #E4E4E4;
				border-right: 1px solid #E4E4E4;

				&:nth-child(3n) {
					border-right: 0;
				}
			}
		}
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;

		.spin {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;

			/deep/.ant-spin-container {
				width: 100%;
				height: 100%;
				z-index: 999;
			}

			.spin-content {
				border: 1px solid #91d5ff;
				background-color: #e6f7ff;
				padding: 300px 0px 0;
				width: 100%;
				height: 100%;
				text-align: center;
			}
		}
	}

	.infotit {
		width: 160px;
	}

	.infocell {
		flex: 1;
		text-align: left;
	}

	/deep/.ant-form-item {
		margin: 20px 50px;
	}

	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	.bg-shadow {
		box-shadow: 0 0 15px #eee;
		padding: 10px 15px;
	}
</style>
